<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-05-21 09:54:00
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-06-27 15:23:09
 * @FilePath: \hn-fire-product-mobile\src\pages\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { useUserStore } from '@/stores/user';
import Third from './components/third.vue';
import Company from './components/company.vue';
import Inspection from './components/inspection.vue';
import SafetyEdu from './components/safetyEdu.vue';
import { useRouter } from 'vue-router';
import examScores from './components/examScores.vue';
import certificate from './components/certificate.vue';
import { whManagerBsTbArticleGetPropagandaListUsingPost, WhManagerSystemSystemFileGetById } from '@/genapi/wh';

const userStore = useUserStore();

const dialogVisible = ref(false);

const getUserType = (type) => {
	switch (type) {
		case '1':
			return '企业用户';
		case '2':
			return '园区用户';
		case '3':
			return '第三方用户';
		default:
			return '游客用户';
	}
};

const list = ref<Record<string, any>[]>([]);

whManagerBsTbArticleGetPropagandaListUsingPost({ data: {} }).then((res) => {
	const imgArr = ref<Record<string, any>[]>([]);
	res.data?.forEach((item) => {
		imgArr.value.push({ imgId: item.imageId, articleId: item.articleFileId, imgUrl: '' });
	});
	imgArr.value.forEach((item) => {
		WhManagerSystemSystemFileGetById(item.imgId).then((res) => {
			item.imgUrl = `${import.meta.env.VITE_SERVER_URL_PROXY}/whManager${res.data.path}?token=${
				userStore.authorization
			}`;
		});
	});
	list.value = imgArr.value;
});

const logout = () => {
	userStore.logout();
};

const router = useRouter();

function dangerReport() {
	router.replace({ path: '/home/danger' });
}

function imgClick(articleId: string) {
	userStore.articleId = articleId;

	router.replace({ path: '/home/articlePage' });
}
</script>

<template>
	<div class="main-container">
		<div class="user-details-container">
			<div class="user-avatar-box">
				<img src="./assets/avatar.png" />
				<div class="username-text">
					<span style="font-size: 18px">{{ userStore.userInfo?.systemUser?.realName }}</span>
					<span style="font-size: 12px">{{ getUserType(userStore.userInfo?.systemUser?.type) }}</span>
				</div>
			</div>
			<!-- <IconFont @click="dialogVisible = true" name="rect-right" color="#a9a7a7"></IconFont> -->
      <IconFont @click="router.replace({path:'/home/inspectionFinish'});" name="rect-right" color="#a9a7a7"></IconFont>
			<nut-dialog
				teleport="#app"
				title="退出登录"
				content="确认要退出登录吗？"
				v-model:visible="dialogVisible"
				:onOk="logout"
			></nut-dialog>
		</div>
		<div class="top-swiper-box">
			<nut-swiper
				:init-page="1"
				:auto-play="3000"
				pagination-visible
				pagination-color="#426543"
				pagination-unselected-color="#808080"
				style="height: 100%"
				:is-prevent-default="false"
			>
				<nut-swiper-item
					v-for="(item, index) in list"
					:key="index"
					style="height: 100%"
					@click="imgClick(item.articleId)"
				>
					<img :src="item.imgUrl" alt="" style="height: 100%; width: 100%" draggable="false" />
				</nut-swiper-item>
			</nut-swiper>
		</div>
		<div class="hidden-danger-report" @click="dangerReport">
			<img src="./assets/danger.png" />
			<span>共同监督隐患治理情况，维护良好园区环境</span>
			<IconFont name="rect-right" color="#a9a7a7"></IconFont>
		</div>
		<div class="bottom-page-container">
			<Third v-if="userStore.userInfo?.systemUser?.type === '3'"></Third>
			<Company v-else-if="userStore.userInfo?.systemUser?.type === '1'"></Company>
			<Inspection v-else-if="userStore.userInfo?.systemUser?.type === '2'" />
		</div>
	</div>
</template>

<style scoped lang="scss">
.main-container {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: url('./assets/bg.png');
	background-repeat: no-repeat;
	background-size: 100% 30%;
	background-color: #eeeeeeb7;
	--nut-button-primary-border-color: #000;
	--nut-primary-color: #165dff;
	.user-details-container {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60px 10px 0 10px;
		.user-avatar-box {
			display: flex;
			width: 120px;
			justify-content: space-around;
			align-items: center;
			img {
				width: 45px;
				height: 45px;
			}
			.username-text {
				display: flex;
				flex-direction: column;
				color: #eeeeee;
			}
		}
	}
	.top-swiper-box {
		margin-top: 20px;
		width: 90%;
		height: 150px;
		border-radius: 10px;
		overflow: hidden;
	}
	.hidden-danger-report {
		margin-top: 10px;
		background-color: #fff;
		height: 45px;
		padding: 0 5%;
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		line-height: 12px;
		font-size: 12px;
		color: #757575;
	}
	.bottom-page-container {
		width: 100%;
		height: calc(100vh - 45px - 150px - 45px - 80px - 100px);
		margin-top: 10px;
	}
}
:deep(.nut-tabs .nut-tabs__titles) {
	background-color: #fff;
}
:deep(.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line) {
	background-color: #1664ff;
	border-radius: 10px;
}
:deep(.nut-tabs .nut-tabs__titles .nut-tabs__titles-item) {
	color: #4e5969;
}
:deep(.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active) {
	color: #1664ff;
}
</style>
